

<template>
  <div style="padding: 10px">
    <div v-if="tableData.length > 0">
      <div class="room-info">
        <img :src="tableData[0].coverImage" alt="Room Image" style="width: 300px; height: 200px;">
        <div class="room-details">
          <h2>{{ tableData[0].roomName }}</h2>
          <p>价格: {{ tableData[0].price }}元</p>
          <p>设施: {{ tableData[0].facilities }}</p>
          <p>是否有窗: {{ tableData[0].hasWindow ? '是' : '否' }}</p>
          <p>有无早餐: {{ tableData[0].breakfast ? '有' : '无' }}</p>
          <p>地址: {{ tableData[0].address }}</p>
          <div style="display: flex; justify-content: space-between; width: 300px;">
            <el-button @click="add">立即预订</el-button>
            <div>
              <span>收藏({{ getCollectionCount() }})</span>
              <span>分享</span>
              <span>点赞({{ getLikeCount() }})</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-else>正在加载...</div>

    <el-dialog
        v-model="dialogVisible"
        title="提示"
        width="30%"
    >
      <el-form :model="form" label-width="120px">
        <el-form-item label="用户号">
          <el-input v-model="form.userId" style="width: 80%"/>
        </el-form-item>
        <el-form-item label="房间类型">
          <el-input v-model="form.roomType" style="width: 80%"/>
        </el-form-item>
        <el-form-item label="客户名">
          <el-input v-model="form.name" style="width: 80%"/>
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="form.phone" style="width: 80%"/>
        </el-form-item>
        <el-form-item label="入住时间">
          <el-date-picker v-model="form.checkinDate" style="width: 80%"/>
        </el-form-item>
        <el-form-item label="退房时间">
          <el-date-picker  v-model="form.checkoutDate" style="width: 80%"/>
        </el-form-item>
        <el-form-item label="下单时间">
          <el-date-picker  v-model="form.orderTime" style="width: 80%"/>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="form.remarks" style="width: 80%"/>
        </el-form-item>



      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="save">确定</el-button>
      </span>
      </template>
    </el-dialog>

    <Comment v-if="showAdditionalPage" :room-id="tableData[0].id"/>


  </div>
</template>

<script>
import request from "@/utils/request";
import Comment from "@/views/Comment";
// 导入Element Plus组件

export default {
  name: "HotelRoomInfo",
  components: {
    Comment,
  },
  data() {
    return {
      form: {},
      dialogVisible: false,
      search: '',
      currentPage: 1,
      total: 10,
      pageSize: 10,
      tableData: [],
      idQuery: '',
      showAdditionalPage: true,

    };
  },
  methods: {
    searchById(id) {
      request.get(`/user/getRoomInfoById/${id}`).then(res => {
        if (res.code === '0') {
          this.tableData = [res.data];
          this.total = 1;
          this.showAdditionalPage = true;
        } else {
          this.$message({
            type: "error",
            message: "查询失败"
          });
          this.tableData = [];
          this.total = 0;
          this.showAdditionalPage = false;
        }
      });
    },
    getCollectionCount() {
      return this.tableData[0]?.collectionCount || 0;
    },
    getLikeCount() {
      return this.tableData[0]?.likeCount || 0;
    },
    add(){
      this.dialogVisible = true;

    },
    save(){
      //如果没有id则直接新增
      request.post("user/order/getOrder", this.form).then(res => {
        console.log(res)
        if (res.code === '0') {
          //其中的￥。message是自带的提示，如果更新成功，则提示更新成功
          this.$message({
            type: "success",
            message: "新增成功"
          })
        } else {
          this.$message({
            type: "error",
            message: res.msg
          })
        }
        //this.load();//新增成功后直接刷新表格中的数据
        this.dialogVisible = false;//然后关闭弹窗
      })
    }


  },
  created() {
    const id = this.$route.query.id;
    if (id) {
      this.searchById(id);
    }
  }
};
</script>

<style scoped>
.room-info {
  display: flex;
  align-items: center;
}

.room-details {
  margin-left: 20px;
}

button {
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
}

span {
  margin-right: 10px;
}
</style>
